<!DOCTYPE html>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>


<%@ include file="/WEB-INF/include.jsp"%>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="pragma" content="nocache">
<meta http-equiv="expires" content="Thu, 1 October 1998 00:00:00 PST">
<title><spring:message code="title" /></title>

<link rel="stylesheet" href="../css/config.css" type="text/css"></link>

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script language="JavaScript">
	function point_it(event){
	    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	    document.classifficatonForm.form_x.value = pos_x;
	    document.classifficatonForm.form_y.value = pos_y;
	    document.classifficatonForm.idImage.src="";
	    document.classifficatonForm.action ="objectclassificationchange";
		document.classifficatonForm.submit();
	}
	
	function double_point_it(event){
	    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	    document.classifficatonForm.form_x.value = pos_x;
	    document.classifficatonForm.form_y.value = pos_y;
	    document.classifficatonForm.idImage.src="";
	    document.classifficatonForm.action ="getinfoobject";
		document.classifficatonForm.submit();
	}
	

</script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$("img").mousemove(
						function(e) {
							$('#position').html(
									"(INFO)  X:"
											+ (e.pageX - Math.floor($("img")
													.offset().left))
											+ " - Y:"
											+ (e.pageY - Math.floor($("img")
													.offset().top)));
							$("img").hover(function() {
								$("#position").show();
							}, function() {
								$("#position").hide();
							});
						});
			});
	

</script>
</head>
<body>
	<jsp:include page="/WEB-INF/views/menu.jsp" />
	<br>
	<br>
	<form  name="classifficatonForm" method="post">
		<table>
			<tr>
				<td>
				<div >
					<fieldset>
						<legend>
							<spring:message code="reference" />
						</legend>
						<c:forEach var="clase" items="${clases}">
							<div>
								<table>
									<br>
									<td>
										<table border="1" cellspacing="0" cellpadding="0" height="10px" width="10px">
											<tr>
												<td bgcolor="${clase.colorHex}"></td>
											</tr>
										</table>
									</td>
									<td><c:out value="${clase.descripcion}" /></td>
								</table>
							</div>
						</c:forEach>
					</fieldset>
					</div>
					<br><br>
					<div>
					<fieldset>
						<legend>
							<spring:message code="classification" />
						</legend>
						<div>
								<br>
								<table  border="1" cellspacing="0" cellpadding="2" >
								<tr>
										<td><spring:message code="classifications" /></td>
										<td><spring:message code="quantity" /></td>
										<td><spring:message code="area" /></td>
									</tr>
									<c:forEach var="result" items="${objectsClassified}">
									<tr>
										<td><c:out value="${result[0]}" /></td>
										<td><c:out value="${result[1]}" /></td>
										<td><c:out value="${result[2]}" /></td>
									</tr>
										</c:forEach>
								</table>
								<br><br>
								<b><spring:message code="testWeight" /> :</b> <c:out value="${testWeight}" />
								<br>
								<b><spring:message code="moisture" /> :<input path="moisture" id="moisture" name="moisture" />
								<br><br>
								<b><spring:message code="result" /> :</b> <c:out value="${result}" />
								<br>
								<b><spring:message code="discount" /> :</b> <c:out value="${discount}" />
								<br><br>
								<input type="submit" value="<spring:message code="recalculate"/>" id="recalculate" name="recalculate"/>
							</div>
					</fieldset>
					</div>
					
					<div>
					<fieldset>
						<legend>
							<spring:message code="classification" />
						</legend>
						<div>
								<br><br>
								<b><spring:message code="testWeight" /> Nombre :</b> <c:out value="${nameObject}" />
								<br><br>
								<b><spring:message code="result" /> area:</b> <c:out value="${areaObject}" />
								<br>
								<b><spring:message code="discount" /> ancho:</b> <c:out value="${widthObject}" />
								<br>
								<b><spring:message code="discount" /> alto:</b> <c:out value="${heightObject}" />
								<br><br>
							</div>
					</fieldset>
					</div>
					
				</td>
				<td>
					<%
						if (session.getAttribute("uploadFile") != null
								&& !(session.getAttribute("uploadFile")).equals("")) {
					%> 
						<br> <br>
						<div style="height: 800px; width: 800px; overflow: scroll;"
							id="pointer_div" onclick="point_it(event)" ondblclick="double_point_it(event)">
							<img id="idImage" src="<%=session.getAttribute("uploadFile")%>"
								alt="Imagen a clasificar <%=session.getAttribute("uploadFile")%> " />
						</div>
						 X: <input type="text" name="form_x" size="4" /> - Y: <input
						type="text" name="form_y" size="4" /> 
					<%
						}
					%> 
					<br> <br>
					<div id="position"></div>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>